<template>
    <div class="cent_back">
        <solid-window class="window"  :msg="popwarn" ref="child"></solid-window>
        <div class="account_back" id="account_back">
            <div class="msg-error" id="msg_error">
                <b></b>{{this.warnMsg}}
            </div>
            <div>
                <label class="name_lable" id="name_lable1"></label>
                <input type="text" @blur="bluron(1)" @click="change(1)" v-model="user.mail" placeholder="邮箱地址">
            </div>

            <div>
                <label class="name_lable" id="name_lable2"></label>
                <input class="input_class" type="password" @blur="bluron(2)" @click="change(2)" v-model="user.password" placeholder="验证码">
                <button class="button_id" id="button_id"  @click="checkEmail();showcannnel(0);changebuttonbackground()">重新获取</button>
            </div>

            <a class="name_pwd" href="/#">{{this.forgetpwd}}</a>
            <div class="alienbox">
                <button class="alien" id="alien" @click="userlogin" >登录</button>
            </div>
        </div>
    </div>
</template>

<script>

import SolidWindow from "@/components/sub/SolidWindow.vue";

export default {
    name: "mailLogin",
    components: {SolidWindow},
    data(){
        return {
            user:{
                mail:'',
                name:'',
                password:''
            },
            buttonflage:{
                flage:true,
            },
            warnMsg: '',
            warnshow:'hidden',
            forgetpwd:'忘记密码',
            flage:'true',
            popwarn:'',
            isflage:false,
            //对于接受到验证码-->判断是否可以登录
            flagem:false,
        }
    },
    methods:{
        warnwindow(msg,warn){
            document.getElementById(msg).disabled=true;
            this.popwarn=warn;
            this.$refs.child.Scribblewindow();
            document.getElementById(msg).disabled=false;
        },
        // ======================重新获取的按钮
        showcannnel(msg){
            // if (msg==1){
            //     document.querySelector('.enroll_img_i').style="display: block;";
            // }else f (msg==0){
            //     document.querySelector('.enroll_img_i').style="display: none;";
            // }
        },
       async checkEmail(){

           let res = await this.$http.post("mailcode", this.enroll.email);
           //这里data存放的是后端返回的用户名，这里可以根据需要返回指定数据
           //  this.$store.commit("login", res.data.token);

           console.log("收到的状态码"+res.code);

           //对有没有获取到验证码为条件进行拦截
           this.flagem=false;

           if(res.code==200){
               // 成功的话讲获取到额验证码保存到execode中去
               // this.$store.commit("login", res.data.token);
               // this.$router.push('/');
               // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
               this.$router.push('/enrollview');

               //对有没有获取到验证码为条件的开放
               this.flagem=true;


           }else if (res.code!=403) {
               // console.log("邮箱验证码获取失败");
               // this.$router.push('/')
               this.flagem=false;
           }

        },

        // =======================
        bluron(newValue){
            if(this.flage){
                return;
            }else {
                console.log("bluron+false")
                // 输入框变红
                const divsub=document.getElementById('account_back').getElementsByTagName('div');

                divsub[newValue].style.border='1px solid #ef1c1c';
            }
        },

//获取验证码的倒计时
        changebuttonbackground(){
            var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
            if (!reg.test(this.user.mail)) {
                this.warnwindow("button_id","邮箱格式错误")
                return;
            }else {
                this.warnwindow("button_id","验证码已发送，请注意查收")

                if (this.buttonflage.flage===true) {

                    // console.log(this.buttonflage.flage)
                    this.buttonflage.flage = false;
                    // console.log(this.buttonflage.flage)

                    // 获取验证码的按钮变色
                    document.querySelector('.button_id').style = "" +
                        "background: #f4f5f6;" +
                        "background: linear-gradient(to right,#FFFFFF,#F5F5F5,#DCDCDC);";

                    let wait = 3;
                    let rong = document.querySelector(".button_id");
                    let _this = this;

                    const intervalId = setInterval(function refer() {
                        if (rong == null) {
                            clearInterval(intervalId);
                        }
                        if (wait > 0) {
                            rong.innerHTML = wait + "秒后重新获取";
                            wait--

                        } else {
                            rong.innerHTML = "重新获取";
                            document.querySelector('.button_id').style = "";
                            clearInterval(intervalId);
                            // console.log(_this.buttonflage.flage)
                            _this.buttonflage.flage = true;
                            // console.log(_this.buttonflage.flage)
                        }
                    }, 1000)
                }
            }
        },
        change(newValue) {
            if(this.flage){
                return;
            }else {
                // 输入框变红
                const divsub=document.getElementById('account_back').getElementsByTagName('div');
                for(var i=1;i<3;i++){
                    divsub[i].style.border='1px solid #ef1c1c';
                }
                const divsub2=document.getElementById('account_back').getElementsByTagName('label');
                for (var j=0;j<divsub2.length;j++){
                    divsub2[j].style.backgroundColor='#e4393c;';
                }
                divsub[newValue].style.border='1px solid #bdbdbd';
            }

        },
        isnull(){

            var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
            if(this.user.mail==''&&this.user.password==''){
                this.warnMsg='请输入账户名和密码';
                return false;
            }else if (this.user.mail==''){
                this.warnMsg='请输入账户名';
                return false;
            }else if (this.user.password==''){
                this.warnMsg='请输入密码';
                return false;
            }else if (!reg.test(this.user.mail)){
                this.warnMsg='邮箱格式错误';
                return false;
            }else {
                return true;
            }

        },

// 登录的功能实现
        async userlogin() {
            this.flage=false;
            // 显示的警告
            const warn=document.getElementById('msg_error');
            // 输入框变红
            const divsub=document.getElementById('account_back').getElementsByTagName('div');

            //对于输入信息中的信息是否为空和邮箱符合标准的时候进行判断
            if(this.isnull()){
                warn.style.visibility='hidden';
            }else {
                warn.style.visibility='visible';
                // 边框变红
                for(var i=1;i<3;i++){
                    divsub[i].style.border='1px solid #ef1c1c';
                }
                return;
            }

            //  对是否   后端发送验证码
            if (this.flagem!=true){
                this.warnwindow("alien","请先发送验证码");
            }


            //请求后端
                let res = await this.$http.post("loginmail", this.user);
                //这里data存放的是后端返回的用户名，这里可以根据需要返回指定数据
                //  this.$store.commit("login", res.data.token);
                if(res.code==200){
                    // 成功的话讲获取到额验证码保存到execode中去
                    // this.$store.commit("login", res.data.token);
                    // this.$router.push('/');
                    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                }else if (res.code!=200) {
                    // alert("sdjfl")
                    // this.$router.push('/')
                    this.$router.push('/enrollview');
                }
            // axios.post("login2",this.user);
        },

        logout() {
            localStorage.clear();
            window.location.reload();
        },
    }
}
</script>

<style scoped>


.cent_back{
    /*距离上面的距离*/
    margin-top: 5px;
    margin-bottom: 15px;
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
/*显示没有输入的提示信息*/
.account_back .msg-error{
    /*弹性盒子*/
    display: flex;
    justify-content: start;
    align-items: center;
    /*显示出来*/
    visibility: hidden;

    background: #ffebeb;
    color: #e4393c;
    border: 1px solid #faccc6;
    padding: 3px 10px 3px 10px;
    line-height: 15px;
    height: auto;
    margin-bottom: 5px;
}
.account_back .msg-error b{
    margin-right: 10px;
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background: url("@/assets/pwd-icons-new.png") -104px -49px no-repeat;
}
.account_back{
    /**/
    width: 306px;
    height: auto;
}
.account_back div{
    overflow: hidden;
    border: 1px solid #bdbdbd;
    /*border-color: #ef1c1c;*/
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 23px;
    border-radius: 8px 8px 8px 8px;
}
.account_back div:focus{
    border: 1px solid #bdbdbd;
}
/*账户图像*/
.account_back .name_lable{
    background-position: 0 0;
}
.account_back div button{

}
/*============输入框前的图片============*/
.account_back label{
    display: block;
    position: relative;
    top: 0;
    left: -2px;
    width: 38px;
    height: 38px;
//border-right: 1px solid #bdbdbd;
    background: url("@/assets/pwd-icons-new.png") no-repeat;
}

.account_back #name_lable2{
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 38px;
//border-right: 1px solid #bdbdbd;
    background: url("@/assets/pwd-icons-new.png") -50px 0px no-repeat;

}

/*==========输入框前的图片=========*/


/*===========账户的输入框=========*/
.account_back input{
    text-align: left;
    outline: none;
    border: 1px solid #bdbdbd;
    height: 18px;
    border: 0;
    padding: 10px 0 10px 10px;
    min-width: 253px;
    float: none;
    font-size: 14px;
    font-family: '\5b8b\4f53';
}
.account_back .input_class{
    text-align: left;
    outline: none;
    border: 1px solid #bdbdbd;
    height: 18px;
    border: 0;
    padding: 10px 0 10px 10px;
    min-width: 130px;
    float: none;
}
/*==============账户的输入框的结尾=================*/
.account_back div #button_id{

    width: 113px;
    height: 35px;
}
/*------------*/

/*忘记密码的模块*/

/*忘记密码*/

.account_back .name_pwd{
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    margin-left: 80%;
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}

.account_back .name_pwd:hover{
    color: #E4393C;
    text-decoration: underline;
}
/*====重新获取的按钮*/
.cent_back .account_back .button_id{
    all: unset;
    width: 118px;
    height: 52px;
    border: 0px;
    cursor: pointer;
    font-size: 12px;
    font-family: '\5b8b\4f53';
}
/*登录按钮的容器*/
.account_back .alienbox{
    border: 0px solid #bdbdbd;
    /*border-color: #ef1c1c;*/
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 23px;
    outline: none;
}
/*登录的按钮*/
.account_back div .alien{
    display: block;
    width: 302px;
    height: 31px;
    border: 1px solid #e85356;
    background: #e4393c;
    line-height: 31px;
    color: #fff;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
    letter-spacing: 5px;
    text-decoration: none;
    cursor: pointer;
}
</style>